<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/styles/layui.css" media="all">
    <link rel="stylesheet" href="/styles/common.css"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <script type="text/javascript" src="/styles/js/sockjs.min.js"></script>

    <script type="text/javascript" src="/styles/js/jquery-1.7.2.js"></script>

</head>
<body>
<#include "top.ftl">
<div class="page-body">
    <#include "leftmenu.ftl">
    <div class="page-content">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>·聊天·</legend>
        </fieldset>
        <div class="layui-row" style="float:left;width: 1000px; margin: 20px 0 0 40px;">
            <div class="layui-col-md7">
                <div class="layui-row grid-demo grid-demo-bg1">
                    <div class="layui-col-md12">
                        <div class="grid-demo"
                             style="background-color: white;height: 300px;border:1px solid #000;  box-shadow: darkgrey 10px 10px 30px 5px ;">
                            <div style="background-color: lightcyan">
                                <span>
                                    <a href="#">·聊天</a>
                                    <a href="#">·${dapartment}</a>
                                    <a>·${username}</a>
                                    <input type="text" id="username" value="${username}" hidden>
                                    <input type="text" id="dapartment" value="${dapartment}" hidden>
                                </span>
                            </div>
                            <textarea name="intro" id="textarea_id" required lay-verify="required" placeholder="聊天记录"
                                      class="layui-textarea" readonly="readonly"
                                      style="resize:none;width:100% ;height:100%;">
<#if chats??>
    <#list chats as ct >
        ${(ct.speaktime)?string('yyyy.MM.dd HH:mm:ss')}·${ct.departmentname}·${ct.employeename}
        ${ct.content}

    </#list>
</#if>
</textarea>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="grid-demo grid-demo-bg2"
                             style="background-color: white;height: 150px;border:1px solid #00FFFF;box-shadow: darkgrey 10px 10px 30px 5px;">
                            <#--                            <form action="#" method="post">-->
                            <textarea id="msg" name="content" required lay-verify="required" maxlength="100"
                                      placeholder="请输入聊天信息(不能超过100字)" class="layui-textarea"
                                      style="resize:none;width:100%;height:100%;"></textarea>
                            <#--                                <button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" style="float: right" ><input type="submit" value="发送"></button>-->
                            <button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"
                                    style="float: right" onclick="send()">发送
                            </button>
                            <#--                            </form>-->
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <br>
        <br><br>
        <br>
        <br>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>当前部门员工</legend>
        </fieldset>
        <#if otherpeople??>
            <#list otherpeople as otp>
                <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal"
                        style="margin-top: 30px;">${otp.departmentname}·${otp.role}·${otp.employeename}</button>
            </#list>
        </#if>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="layui-footer">
            : 欢迎使用
        </div>
    </div>

</div>

<script>
    var textarea = document.getElementById('textarea_id');
    textarea.scrollTop = textarea.scrollHeight;
    //在textarea中解析html元素
    // var $textarea = $('textarea[name=intro]');
    // var html = $textarea.val();
    // $textarea.val($(html).text());
</script>

<script type="text/javascript">

    var ws;

    window.onload = connect;

    //监听
    async function connect() {
        await sleep(500);
        if ('WebSocket' in window) {
            if (ws == null) {
                //以下用的是ip路径，那么在本地启动项目时也需要使用ip地址进行访问
                ws = new WebSocket("ws://10.96.150.124:8080/webSocketServer");
            }
        } else {
            alert('当前浏览器不支持此功能 请更换浏览器重试');
        }
        //连接建立成功处理
        ws.onopen = function (evnt) {
            console.log("连接建立成功");
        };
        //接受处理
        ws.onmessage = function (evnt) {
            console.log("接收到消息:" + evnt.data);
            setMessageInnerHTML(evnt.data);
        };
        //连接建立失败错误处理
        ws.onerror = function (evnt) {
            console.log("连接建立失败")
        };
        //处理
        ws.onclose = function (evnt) {
        }
    }

    function send() {
        var value1 = $("#msg").val();
        var username = $("#username").val();
        var dapartment = $("#dapartment").val();

        //获取时间格式 注意格式
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        var s = myDate.getSeconds();
        var now = year + '.' + month + "." + date + " " + h + ':' + m + ":" + s;

        value = now.toString() + "$" + dapartment + "$" + username + "$" + value1;
        console.log("当前发送的消息是:" + value);
        if (ws != null) {
            ws.send(value);
            insettosql(value1);
        } else {
            alert("发生错误,未连接到服务器");
        }
        //清空文本框
        $("#msg").val("");
    }

    function sleep(millisecond) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, millisecond)
        })
    }

    //进入数据库的操作
    function insettosql(content) {
        $.post("/chatContent", {content: content}, function (msg) {
            if (msg == 'success') {
                console.log("持久化聊天记录成功~");
            }
        })
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        var arr = innerHTML.split('$');
        var arr1 = arr[0];
        var arr2 = arr[1];
        var arr3 = arr[2];
        var arr4 = arr[3];
        var textmsg = $("#textarea_id");
        textmsg.append("新消息 : " + arr1 + "·" + arr2 + "·" + arr3 + "\n" + arr4 + "\n\n");
        var textarea = document.getElementById('textarea_id');
        textarea.scrollTop = textarea.scrollHeight;
    }
</script>
</body>
</html>